  
<!-- 用户管理模块,2018-12-14,作者:zc-->
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>
                    角色管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="listLoading">
            <!-- 搜索区-->
            <div class="handle-box"> 
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                   <el-form :inline="true"    class="demo-form-inline" >
                        <el-form-item label="角色ID">
                            <el-input v-model="search.userid" style=""  placeholder="角色ID" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="角色名称">
                            <el-input v-model="search.username" placeholder="角色名称" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"   round icon="el-icon-search">搜索</el-button>                           
                        </el-form-item>
                    </el-form>
                </el-col>
            </div>
              <!--新增按钮-->
               <template>                             
                   <div class="btn">
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd" size="mini" round>新增</el-button>      
                        <el-button type="danger" icon="el-icon-delete" @click="handleDeleteList" size="mini" round>批量删除</el-button>
                   </div>
               </template>              
                <template>
                     <!-- 表格 -->
                    <el-table :data="tabbleDta" border   style="width:100%">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="roleid" label="角色ID">
                        </el-table-column>
                        <el-table-column prop="rolename" label="角色名称">
                        </el-table-column>
                        <el-table-column prop="rolecode" label="角色编码">
                        </el-table-column>
                        <el-table-column prop="addperson" label="添加人">
                        </el-table-column>
                        <el-table-column prop="addtime" label="添加时间">
                        </el-table-column>
                        <el-table-column  fixed="right" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button  size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                                <el-button  type="danger" size="mini" @click="handleDelte(scope.$index,scope.row)">删除</el-button>
                            </template>
                        </el-table-column>           
                    </el-table>
                    <div class="pagination">   
                        <el-pagination
                            @current-change="pageChange"
                            @size-change="pageSizeChange"
                            :total="total"
                            :page-size="pageSize"
                             layout="total, sizes, prev, pager, next, jumper">
                        </el-pagination>
                    </div>
                </template>  
        </div>
         <!-- 添加 -->
        <roleadds ref='raddData'></roleadds>

    </div>
</template>

<script>

import  roleadds from './roleAdd';

export default {
    
    data(){
        return{
            // 列表数据
            tabbleDta:[],
            // 列表Loading加载
            listLoading: true,
            search:{},
            dialogVisible:false,

            //分页
            pageIndex: 1,
            pageSize:10,
            total:0,
            
        }
    },
    mounted(){
        this.listLoading = true;
        //初始化加载数据
        this.getResult();
       
    },
    methods:{
         
        getTableData(){
            
           this.tabbleDta =this.tabbleDta.slice((this.pageIndex -1)* this.pageSize,(this.pageIndex)* this.pageSize);
        },
        // 获取列表数据
        getResult(){
            var _this = this;
            _this.$api.RoleList().then((res)=>{
                _this.listLoading = false;
               if(res.result =='ok'){
                    _this.tabbleDta = res.data;
                    _this.getTableData();
                    _this.total=res.count;
               }    
            }).catch((err)=>{
                _this.$message({
                   message:'数据获取失败',
                   type:'error'
                });
           });
        },
        pageChange(pageIndex) {
             this.pageIndex = pageIndex;
             this.getResult();
        },
        pageSizeChange(pageSize) {                    
             this.pageIndex = 1;
             this.pageSize = pageSize;
             this.getResult();
        },
        // 修改用户
        handleEdit(index,row){        
         this.$nextTick((res)=>{
             this.showDialog("修改角色");
             //this.$refs['raddData'].roleData = Object.assign({}, row); 
             this.$refs['raddData'].id = row.roleid;
             this.$refs['raddData'].EditRole();
         })
 
        },
        // 添加用户
        handleAdd(){
            this.showDialog("添加角色");
            //this.$refs['raddData'].resetForm();
             //this.$refs['raddData'].roleData=Object.assign({});
        },
        showDialog(title){
            var _this = this;
            _this.$refs['raddData'].Visible =true;
            _this.$refs['raddData'].title = title;

            _this.$refs['raddData'].Treereset();
         
 
        },
        // 批量产出
        handleDeleteList(){

            this.$message({
                message:'功能尚未开发',
                type:'error'
            })
        },
        // 删除
        handleDelte(index,row){
            
            var _this = this;
            
            _this.$confirm("您确定删除吗?",'提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type: 'warning',
                roundButton:true             
            }).then(() => {     
                _this.listLoading = true;         
                _this.$api.RoleDelete({'roleid':row.roleid}).then((res)=>{
                    if(res.code ==400){
                        _this.$message({ message:res.msg,type:'error'});
                        return;
                    }               
                    if(res.result =='ok'){
                        _this.$message({ message:res.msg, type:'success'});
                        //更新
                        _this.getResult();
                    }else{
                        _this.$message({ message:res.msg,type:'error'});
                    }         
                    _this.listLoading = false;     
                }).catch((error)=>{
                    _this.$message({
                        message:error.msg,
                        type:'seccess'
                    });
                });
            })
        }
    },
    components:{
        roleadds
    }
}
</script>

<style scoped>
 
    .btn{
        margin-bottom: 1rem;
    }
</style>
 